<template>
	<view class="login-popup" v-if="modelValue">
		<view class="mask" @tap="handleClose"></view>
		<view class="popup-content">
			<view class="popup-header">
				<text class="title">登录</text>
				<text class="close" @tap="handleClose">×</text>
			</view>
			
			<view class="form">
				<view class="input-group">
					<text class="label">账号</text>
					<input 
						v-model="userAccount"
						placeholder="请输入账号"
						maxlength="20"
						class="input"
					/>
				</view>
				
				<view class="input-group">
					<text class="label">密码</text>
					<view class="code-input">
						<input 
							v-model="userPassword"
							placeholder="请输入密码"
							maxlength="20"
							class="input"
						/>
					</view>
				</view>
				
				<button class="submit-btn" @tap="handleLogin" :disabled="!canSubmit">
					登录
				</button>
				
				<view class="agreement">
					<checkbox-group @change="handleAgree">
						<checkbox :checked="agreed" style="transform:scale(0.7)" />
					</checkbox-group>
					<text class="agreement-text">
						登录即表示同意
						<text class="link" @tap="showAgreement">用户协议</text>
						和
						<text class="link" @tap="showPrivacy">隐私政策</text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import request from '@/utils/request'

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits(['update:modelValue', 'success'])

const userAccount = ref('')
const userPassword = ref('')
const agreed = ref(false)

// 是否可以提交
const canSubmit = computed(() => {
	return userAccount.value.length >= 4 && 
	       userPassword.value.length >= 6 && 
	       agreed.value
})

// 关闭弹窗
const handleClose = () => {
	emit('update:modelValue', false)
}

// 同意协议
const handleAgree = (e) => {
	agreed.value = e.detail.value.length > 0
}

// 登录
const handleLogin = async () => {
	if (!canSubmit.value) return
	
	try {
		const res = await request({
			url: '/api/user/login',
			method: 'POST',
			data: {
				userAccount: userAccount.value,
				userPassword: userPassword.value
			}
		})

		if (res.code === 0) {
			// 构造用户信息
			const userInfo = {
				isLogin: true,
				id: res.data.id,
				avatar: res.data.userAvatar || '/static/avatar/default-avatar.png',
				nickname: res.data.userName,
				desc: res.data.userProfile || '这个人很懒，什么都没写~',
				role: res.data.userRole
			}
			
			// 存储用户信息
			uni.setStorageSync('userInfo', userInfo)
			
			emit('success', userInfo)
			emit('update:modelValue', false)
			
			uni.showToast({
				title: '登录成功',
				icon: 'success'
			})
		} else {
			uni.showToast({
				title: res.message || '登录失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('登录失败:', error)
		uni.showToast({
			title: '登录失败，请重试',
			icon: 'none'
		})
	}
}

// 查看协议
const showAgreement = () => {
	uni.navigateTo({
		url: '/pages/agreement/user'
	})
}

// 查看隐私政策
const showPrivacy = () => {
	uni.navigateTo({
		url: '/pages/agreement/privacy'
	})
}
</script>

<style scoped>
.login-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
}

.mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx;
	transform: translateY(0);
	transition: transform 0.3s ease;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}

.title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.close {
	font-size: 48rpx;
	color: #999;
	padding: 20rpx;
}

.input-group {
	margin-bottom: 30rpx;
}

.label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 16rpx;
	display: block;
}

.input {
	height: 88rpx;
	background-color: #f5f7fa;
	border-radius: 44rpx;
	padding: 0 30rpx;
	font-size: 28rpx;
}

.code-input {
	display: flex;
	align-items: center;
}

.code-input .input {
	flex: 1;
	margin-right: 20rpx;
}

.code-btn {
	width: 200rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(135deg, #007aff 0%, #0056b3 100%);
	color: #fff;
	font-size: 26rpx;
	border-radius: 44rpx;
	padding: 0;
	margin: 0;
}

.code-btn[disabled] {
	background: linear-gradient(135deg, #ccc 0%, #999 100%);
	opacity: 0.8;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(135deg, #007aff 0%, #0056b3 100%);
	color: #fff;
	font-size: 30rpx;
	border-radius: 44rpx;
	margin-top: 40rpx;
}

.submit-btn[disabled] {
	background: linear-gradient(135deg, #ccc 0%, #999 100%);
	opacity: 0.8;
}

.agreement {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30rpx;
}

.agreement-text {
	font-size: 24rpx;
	color: #999;
}

.link {
	color: #007aff;
}
</style> 